<!--
 * @Author: wangming
 * @Date: 2021-05-29 15:44:34
 * @LastEditors: wangming
 * @LastEditTime: 2022-03-15 14:17:49
 * @Description: file content
-->
<template>
  <div>
    <el-form-item label="绑定数据字段">
      <el-input v-model="value.name" size="small" disabled></el-input>
    </el-form-item>
    <el-form-item label="标题" prop="title">
      <GlobalizationConfigWord
        class="mr10"
        @setLangCode="(title_i18n) => $set(value, 'title_i18n', title_i18n)"
        :localism="value.title_i18n"
      ></GlobalizationConfigWord>
      <el-input v-model="value.title" size="small"></el-input>
    </el-form-item>
    <el-form-item label="提示文字">
      <GlobalizationConfigWord
        class="mr10"
        @setLangCode="
          (placeholder_i18n) =>
            $set(value, 'placeholder_i18n', placeholder_i18n)
        "
        :localism="value.placeholder_i18n"
      ></GlobalizationConfigWord>
      <el-input v-model="value.placeholder" size="small"></el-input>
    </el-form-item>
    <el-form-item
      label="匹配规则"
      v-if="value.type === 'SHORT_TEXT' || value.type == 'LONG_TEXT'"
    >
      <el-radio-group v-model="value.matchRules">
        <el-radio :label="'FUZZY_MATCH'">模糊匹配</el-radio>
        <el-radio :label="'EXACT_MATCH'">精确匹配</el-radio>
      </el-radio-group>
    </el-form-item>
    <template v-if="value.type === 'DATE'">
      <el-form-item label="日期类型">
        <el-select
          v-model="value.format"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            :label="item.label"
            :value="item.format"
            v-for="(item, index) in dateConfig"
            :key="index"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区间" class="tr">
        <el-switch v-model="value.isRange"></el-switch>
      </el-form-item>
      <el-form-item label="默认系统日期" class="tr">
        <el-switch
          :disabled="value.isRange"
          v-model="value.isCurrentDate"
        ></el-switch>
      </el-form-item>
    </template>
    <template
      v-if="
        value.type === 'RELATION_SELECT' || value.type == 'RELATION_REFERENCE'
      "
    >
      <el-divider>高级设置</el-divider>
      <el-form-item label="数据过滤">
        <el-button
          @click="editJsx"
          type="primary"
          plain
          size="mini"
          icon="el-icon-s-open"
        >
          设置
        </el-button>
      </el-form-item>
    </template>
  </div>
</template>

<script>
import monacoEditor from "./monacoEditor/index.js";
import basicmixins from "../basicmixins";
import { dateConfig } from "@/utils/dateLimitTypeList";
const template = `/**
 * 业务或字典的数据过滤函数
 * @data 接口返回的数据
 * @returns 用于组件的渲染 返回值必须是集合
 */
function parseData(data) {
    return data
}`;
export default {
  mixins: [basicmixins],
  data() {
    return { dateConfig };
  },
  mounted() {
    this.value.matchRules = this.value.matchRules || "FUZZY_MATCH";
  },
  watch: {
    "value.isRange": {
      handler: function (value) {
        if (value) {
          this.value.isCurrentDate = false;
        }
      },
      immediate: true,
    },
  },
  methods: {
    editJsx() {
      let jsx = this.value.parseDataJsx || template;
      monacoEditor.showEdit(decodeURIComponent(jsx)).then((res) => {
        this.$set(this.value, "parseDataJsx", encodeURIComponent(res));
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
